<template>
  <div class="product-list">
    <div
      class="product-wrap"
      v-for="(item, index) in productList"
      :key="index"
      @click.stop="$listeners.goodsClick(item)"
    >
      <!-- 商品详情区 -->
      <div class="product-content">
        <img v-lazy="item.small_image" alt="">
        <p class="product-text">{{item.name}}</p>
        <p class="profuct-desc">{{item.spec}}</p>
      </div>
      <!-- 购买区 -->
      <div class="price-wrap">
        <!-- 价钱 -->
        <div class="price">
          <span class="discount-price">￥{{item.price}}</span>
          <span class="normal-price">￥{{item.origin_price}}</span>
        </div>
        <!-- 购物车 -->
        <div class="buy-cart" @click.stop="addToCart(item)">
          <svg-icon iconClass="buycart_red" className="icon-cart"></svg-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'TabBaritemList',
  props: {
    productList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    addToCart () {},
    ...mapMutations({
      addToCart: 'ADD_TO_CART'
    })
  }
}

</script>
<style lang='scss' scoped>
.product-list {
  display: flex;
  flex-wrap: wrap;
  height: auto;
  background: $bg-color-page;
  padding-left: 1.8%;
  padding-top: px2rem(8);
  .product-wrap {
    width: 48%;
    margin-right: 2%;
    background: $text-color-white;
    border-radius: px2rem(5);
    margin-bottom: 8px;
    padding-bottom: px2rem(10);
    .product-content {
      font-size: px2rem(12);
      .product-text {
        padding-left: px2rem(8);
        padding-right: px2rem(5);
        line-height: px2rem(16);
        @include  text-wrap();
      }
      .profuct-desc {
        @include setFontColor(px2rem(8), #808080);
        padding-left: px2rem(8);
        padding-right: px2rem(5);
        line-height: px2rem(16);
        margin-bottom: px2rem(25);
        padding-top: px2rem(3);
        @include text-ellipsis;
      }
      img {
        @include setWH(100%, 100%);
        background-image: url('../../../assets/img/loading/produce_preload.png');
        background-size: contain;
      }
    }
    .price-wrap {
      @include flexType (space-between);
      padding: 0 px2rem(18) 0 px2rem(5);
      .price {
        .normal-price {
          text-decoration: line-through;
          @include setFontColor(px2rem(8), #999);
          padding: 0 px2rem(2);
        }
        .discount-price {
          @include setFontColor(px2rem(14), #f37078);
        }
      }
      .buy-cart {
        .icon-cart {
          @include setWH(px2rem(25), px2rem(25));
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
